<style type="text/css">
	.swiper-slide
	{color:#ddd;background-position: center; background-size: 100%;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;font-weight: bold;text-align: center;}
	.swiper-slide:hover,.swiper-slide:active
	{text-decoration: none!important;}
	.swiper-text-box
	{background:rgba(0,0,0,0.5);padding:5px;}
	#video-play
	{display:block;border-radius:10px;-webkit-backdrop-filter: saturate(180%) blur(20px);backdrop-filter: saturate(180%) blur(20px);background:rgba(255,255,255,0.6);color:white;}
	@media(min-width: 1000px){
		#home-swiper .swiper-slide
		{font-size:26px;line-height:30px;}
		#home-swiper .swiper-slide small
		{font-size:18px;line-height: 18px;}
		.swiper-text-box
		{background:rgba(0,0,0,0.5);padding:15px;}
		#video-play
		{cursor:pointer;font-size:48px;line-height:30px;padding:15px 20px;}
		#video-play:hover
		{border:1px solid white;background-color: rgba(255,255,255,0.8);}
	}
	@media(min-width: 1000px){
		#home-swiper
		{max-width: 730px;height:392px;}
	}
	@media(min-width: 1280px){
		#home-swiper
		{max-width: 930px;height:500px;}
	}
	@media(max-width: 768px){
		#home-swiper
		{height:222px;background: #ccc;}
		#video-play
		{padding:30px 30px 10px 30px;}
		#video-play i.i
		{font-size: 48px;line-height: 24px;}
	}
</style>
<div class="swiper-container bc-rank" id="home-swiper" data-port='http://api.hongyanche.com/marketing/swiper_list'>
	<div class="swiper-wrapper" >
		<a class='swiper-slide bc-rank-loading'>
			<span class='weui-loading'></span> <small style='color:#aaa'>加载中</small>
		</a>
		<a class='swiper-slide bc-rank-template'>
			<videolink rank=d>
				<span data-toggle='modal' data-target='#video-modal' id='video-play'>
					<videolink rank=1 class='hidden'></videolink>
					<i class='i i-playfill'/><br/><small style="color:#444"><subtitle rank=1></subtitle></small>
				</span>
			</videolink>
			<videolink rank=none class='swiper-text-box'>
				<div class='visible-xs'>
					<small><subtitle_m rank=1></subtitle_m></small>
				</div>
				<div>
					<subject rank=1></subject>
				</div>
				<div>
					<small><subtitle rank=1></subtitle></small>
				</div>

				<url rank=1 class='hidden'></url>
				<sublink rank=1 class='hidden'></sublink>
				<url rank=1 class='hidden'></url>
			</videolink>
		</a>
	</div>
	<div class="swiper-pagination swiper-pagination-white"></div>
	<div class="swiper-button-next swiper-button-white hidden-xs"></div>
	<div class="swiper-button-prev swiper-button-white hidden-xs"></div>
</div>
<script>
	$("#home-swiper").on('bc-rank-success', function(event) {
		var mm = ISMOBILE();
		var e = $(this);
		e.removeClass('.bc-rank')
		e.find('.bc-rank-template').remove();
		e.find('.bc-rank-loading').remove();
		e.find('.bc-rank-content').each(function(index, el) {
			var url = $(el).find('url').html();
			if(mm) url = url + "_m";
			$(el).css('background-image','url('+url+')');
			var link = $(el).find('sublink').html();
			if(link) $(el).attr('href',link);
			if(link.substring(0,1) != "#") $(el).attr('target','_blank')
		});
		var swiper = new Swiper('#home-swiper', {
			pagination: '.swiper-pagination',
			paginationClickable: true,
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
			//spaceBetween: 30,
			autoplay: 3000,
			speed:1000,
		});
	});
</script>